<!-- 二维码展示页面 -->
<script setup lang="ts">
import useStatusBarHeight from '@/composables/statusBarHeight'

const statusBarHeight = useStatusBarHeight()
const topPadding = computed(() => statusBarHeight.value + uni.upx2px(88) + uni.upx2px(80))

// 课程详情数据
const course = ref<Course & { qrcode: string } | null>(null)

onLoad((options) => {
  if (options && options.c)
    course.value = JSON.parse(options.c)
  else
    uni.showToast({ title: '获取数据失败', icon: 'none' })
})
</script>

<template>
  <view class="min-h-screen bg-#0037AE">
    <image class="absolute left-0 top-0 z-0 h-1335rpx w-750rpx" src="@/static/images/qrcode_page_bg.png" />
    <NavigationBar title="二维码" :is-show-back-button="true" front-color="#ffffff" />
    <Spacer :height="topPadding.toString()" unit="px" />
    <view class="mx-55rpx">
      <RecordItem
        :picture="course?.images!"
        :title="course?.title || '未知标题'"
        :teacher="course?.teacher_name"
        :org="course?.place"
        :created-at="course?.start_time"
        hide-shadow
      />
      <Spacer height="40" />
      <view class="flex flex-col items-center rounded-20rpx bg-white">
        <Spacer height="100" />
        <view class="relative">
          <image class="h-432rpx w-432rpx" src="@/static/images/qrcode_frame_brand.png" />
          <image
            class="absolute left-50% top-50% h-400rpx w-400rpx bg-#F8FAFE -transform-translate-50%"
            :src="course?.qrcode || ''"
          />
        </view>
        <Spacer height="80" />
        <view class="text-28rpx text-#333333 font-medium leading-50rpx">
          扫描二维码进行签到
        </view>
        <Spacer height="80" />
      </view>
    </view>
  </view>
</template>

<route lang="yaml">
name: 'qrcode'
style:
  navigationStyle: 'custom'
  navigationBarTextStyle: 'white'
  disableScroll: true
layout: 'custom'
</route>
